<template>
  <div class="form-designer-item-wrap">
    <label-group v-if="componentType === 'form-group'"
                 :label="config.label"
                 :bindKeys="config.bindKeys"
                 :controlProps="config.controlProps"
                 :controlConfigs="config.controlConfigs"
                 :controlValue="config.controlValue"></label-group>
    <label-container v-else :label="config.label" :label-width="labelWidth">
      <component :is="componentType"
                 :bindKeys="config.bindKeys"
                 :controlProps="config.controlProps"
                 :controlConfigs="config.controlConfigs"
                 :controlValue="config.controlValue"
                 @change="change"
      ></component>
    </label-container>
  </div>
</template>

<script>
import LabelGroup from './components/LabelGroup'
import LabelContainer from './components/LabelContainer'
import FormInput from './FormInput'
import FormIcon from './FormIcon'
import FormInputNumber from './FormInputNumber'
import FormSelect from './FormSelect'
import FormSlider from './FormSlider'
import FormSliderInterval from './FormSliderInterval'
import FormSwitch from './FormSwitch'
import FormColorPicker from './FormColorPicker'

export default {
  name: 'FormDesignerItem',
  props: {
    config: {
      type: Object
    },
    labelWidth: {
      type: String,
      default: '60px'
    }
  },
  data() {
    return {}
  },
  computed: {
    componentType: function() {
      return `form-${this.config.controlType}`
    }
  },
  components: {
    LabelGroup,
    LabelContainer,
    FormInput,
    FormIcon,
    FormInputNumber,
    FormSelect,
    FormSlider,
    FormSliderInterval,
    FormSwitch,
    FormColorPicker
  },
  methods: {
    change(v) {
      this.$emit('change', {
        ...this.config,
        controlValue: v
      })
    }
  }
}
</script>

<style scoped lang="scss">
.form-designer-item-wrap {
  margin-top: 12px;
}
</style>
